<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/5/14
  Time: 15:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>一个有趣的鬼魂动画</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
    <link rel="stylesheet" href="./static/css/ghost.css">

</head>
<body>
<div class="scene-container stars-out" tabindex="1">
    <div class="ghost-container">
        <div class="ghost">
            <!-- 鬼魂的头部、眼睛、嘴、腮红 -->
            <div class="ghost-head">
                <div class="ghost-face">
                    <div class="eyes-row">
                        <div class="eye left"></div>
                        <div class="eye right"></div>
                    </div>
                    <div class="mouth-row">
                        <div class="cheek left"></div>
                        <div class="mouth">
                            <div class="mouth-top"></div>
                            <div class="mouth-bottom"></div>
                        </div>
                        <div class="cheek right"></div>
                    </div>
                </div>
            </div>

            <!-- 鬼魂的身体 -->
            <div class="ghost-body">
                <div class="ghost-hand hand-left"></div>
                <div class="ghost-hand hand-right"></div>
                <div class="ghost-skirt">
                    <div class="pleat down"></div>
                    <div class="pleat up"></div>
                    <div class="pleat down"></div>
                    <div class="pleat up"></div>
                    <div class="pleat down"></div>
                </div>
            </div>
        </div>

        <!-- 装饰部分 -->
        <div class="stars">
            <div class="star orange pointy star-1"><div class="star-element"></div></div>
            <div class="star orange pointy star-2"><div class="star-element"></div></div>
            <div class="star yellow pointy star-3"><div class="star-element"></div></div>
            <div class="star yellow pointy star-4"><div class="star-element"></div></div>
            <div class="star blue round star-5"><div class="star-element"></div></div>
            <div class="star blue round star-6"><div class="star-element"></div></div>
        </div>
    </div>

    <!-- 阴影 -->
    <div class="shadow-container">
        <div class="shadow"></div>
        <div class="shadow-bottom"></div>
    </div>
</div>
<!-- partial -->
<script src="./static/js/ghost.js"></script>
<div id="space_area">
    <a id="space_link" href="https://space.bilibili.com/688055875?spm_id_from=333.1007.0.0"
       style="position:absolute;right:0px;bottom:0px;width:100px;border:1px solid #aaa">to My Space</a>
</div>
</body>
</html>